<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout/layout">

<head>
</head>

<body>
<!-- ============================================================== -->
<!-- Container fluid  -->
<!-- ============================================================== -->
<div class="container-fluid" layout:fragment="content">
    <!-- ============================================================== -->
    <!-- Bread crumb and right sidebar toggle -->
    <!-- ============================================================== -->
    <div class="row page-titles">
        <div class="col-md-5 col-8 align-self-center">
            <h3 class="text-themecolor m-b-0 m-t-0">Trip Details</h3>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="home">Home</a></li>
                <li class="breadcrumb-item active">Trips</li>
            </ol>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Bread crumb and right sidebar toggle -->
    <!-- ============================================================== -->
    <!-- ============================================================== -->
    <!-- Start Page Content -->
    <!-- ============================================================== -->
    <!-- Row -->
    <div class="row">
        <!-- column -->
        <div class="col-lg-8 col-md-7">
            <div class="card">
                <div class="card-block">
                    <h4 class="card-title">Trips</h4>
                    <h6 class="card-subtitle">Agency Trips</h6>
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>Bus Code</th>
                                <th>Source Stop</th>
                                <th>Destination Stop</th>
                                <th>Duration</th>
                                <th>Fare</th>
                            </tr>
                            </thead>
                            <tbody>
                            <th:block th:each="trip,iterationStatus : ${trips}">
                                <tr>
                                    <td th:text=${iterationStatus.count}></td>
                                    <td th:text=${trip.busCode}></td>
                                    <td th:text=${trip.sourceStopName}></td>
                                    <td th:text=${trip.destinationStopName}></td>
                                    <td th:text=${trip.journeyTime}></td>
                                    <td th:text=${trip.fare}></td>
                                </tr>
                            </th:block>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-5">
            <div class="card">
                <div class="card-block">
                    <h3 class="card-title">Add New Trip</h3>
                    <h6 class="card-subtitle">Enter details</h6>
                    <form action="#" method="POST" class="form-horizontal form-material" th:action="@{/trip}" th:object="${tripFormData}">
                        <div class="form-group">
                            <label for="busCode" class="col-md-12">Bus Code</label>
                            <div class="col-md-12">
                                <select class="form-control" th:field="*{busCode}" id="busCode" name="busCode">
                                    <option th:each="bus : ${agency.buses}"
                                            th:value="${bus.code}"
                                            th:text="${bus.code}"
                                            th:selected="${bus.code == tripFormData.busCode}">
                                    </option>
                                </select>
                            </div>
                            <small class="text-danger-padded" th:if="${#fields.hasErrors('busCode')}" th:errors="*{busCode}"></small>
                        </div>
                        <div class="form-group">
                            <label for="sourceStop" th:field="*{sourceStop}" class="col-md-12">Source Stop</label>
                            <div class="col-md-12">
                                <select class="form-control" id="sourceStop" name="sourceStop">
                                    <option th:each="stop : ${stops}"
                                            th:value="${stop.code}"
                                            th:text="${stop.name}"
                                            th:selected="${stop.code == tripFormData.sourceStop}">
                                    </option>
                                </select>
                            </div>
                            <small class="text-danger-padded" th:if="${#fields.hasErrors('sourceStop')}" th:errors="*{sourceStop}"></small>
                        </div>
                        <div class="form-group">
                            <label for="destinationStop" th:field="*{destinationStop}" class="col-md-12">Destination Stop</label>
                            <div class="col-md-12">
                                <select class="form-control" id="destinationStop" name="destinationStop">
                                    <option th:each="stop : ${stops}"
                                            th:value="${stop.code}"
                                            th:text="${stop.name}"
                                            th:selected="${stop.code == tripFormData.destinationStop}">
                                    </option>
                                </select>
                            </div>
                            <small class="text-danger-padded" th:if="${#fields.hasErrors('destinationStop')}" th:errors="*{destinationStop}"></small>
                        </div>
                        <div class="form-group">
                            <label for="tripDuration" class="col-md-12">Trip Duration(min)</label>
                            <div class="col-md-12">
                                <input type="text" th:field="*{tripDuration}" class="form-control form-control-line" name="tripDuration" id="tripDuration">
                            </div>
                            <small class="text-danger-padded" th:if="${#fields.hasErrors('tripDuration')}" th:errors="*{tripDuration}"></small>
                        </div>
                        <div class="form-group">
                            <label for="tripFare" class="col-md-12">Fare</label>
                            <div class="col-md-12">
                                <input type="text" th:field="*{tripFare}" class="form-control form-control-line" name="tripFare" id="tripFare">
                            </div>
                            <small class="text-danger-padded" th:if="${#fields.hasErrors('tripFare')}" th:errors="*{tripFare}"></small>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12">
                                <button class="btn btn-success">Add Trip</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- Row -->
    <!-- ============================================================== -->
    <!-- End PAge Content -->
    <!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Container fluid  -->
<!-- ============================================================== -->

</body>

</html>
